<template>
 <div class="box">
   <Dogs v-for='(item,index) in list' 
  :key="index" 
  :url='item.dogImgUrl' 
  :dogName='item.dogName'
  @sub='fn'>
  </Dogs>
  <span class="boxTxt">你最爱的小狗：{{ arr.join(',') }}</span>
</div>
</template>

<script>
import Dogs from './components/02_Dog'
export default {
  data() {
    return {
      list: [
        {
          dogImgUrl:
            "http://nwzimg.wezhan.cn/contents/sitefiles2029/10146688/images/21129958.jpg",
          dogName: "博美",
        },
        {
          dogImgUrl:
            "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimgservice.suning.cn%2Fuimg1%2Fb2c%2Fimage%2FAnngTVcfRIZtjnWKxupCBw.jpg_800w_800h_4e&refer=http%3A%2F%2Fimgservice.suning.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1666419338&t=fe3f805548cce529b1f72625c670cb43",
          dogName: "泰迪",
        },
        {
          dogImgUrl:
            "https://pic.rmb.bdstatic.com/bjh/down/581f5c370f636696381849282a0fed97.jpeg",
          dogName: "金毛",
        },
        {
          dogImgUrl:
            "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fp1.itc.cn%2Fq_70%2Fimages03%2F20220919%2F1c875dd37b1a4e12b7d7ea0218f6966b.jpeg&refer=http%3A%2F%2Fp1.itc.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1666419526&t=9acdde1d5c6b96fbd5e638ff8d85a59b",
          dogName: "哈士奇",
        },
        {
          dogImgUrl:
            "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg2.912688.com%2Fe0b3a276e1e15af0ac0d2a8c9d342d62.jpg&refer=http%3A%2F%2Fimg2.912688.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1666419579&t=cb151f808b0e182d11402bd251042854",
          dogName: "阿拉斯加",
        },
        {
          dogImgUrl:
            "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg3.doubanio.com%2Fview%2Fthing_review%2Fl%2Fpublic%2Fp1263061.jpg&refer=http%3A%2F%2Fimg3.doubanio.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1666419635&t=07c540c332757df0a6968e08c0018c00",
          dogName: "萨摩耶",
        },
      ],
      arr:[]
    };
  },
  methods:{
    fn(dogName){
      // console.log(dogName);
        this.arr.push(dogName)
    }
  },
  components:{
    Dogs
  }
};
</script>

<style>
.box {
  width: 1600px;
}
/* .boxTxt{
  margin-left: 0px;
} */
</style>